<template>
  <div class="user-staff-container">
    <el-container>
      <el-main>
        <el-card>
          <h2>员工信息</h2>
          <div class="staff-info">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="info-label">员工 ID：</div>
                <div>{{ userStaff.userStaffId }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">员工编号：</div>
                <div>{{ userStaff.userStaffCode }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">员工姓名：</div>
                <div>{{ userStaff.userStaffName }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">头像：</div>
                <img :src="userStaff.avatar" alt="头像" class="avatar" />
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="6">
                <div class="info-label">手机号：</div>
                <div>{{ userStaff.userStaffPhone }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">身份证号：</div>
                <div>{{ userStaff.userStaffIdentityCard }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">员工身份：</div>
                <div>{{ userStaffIdentityMap[userStaff.userStaffIdentity] }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">部门：</div>
                <div>{{ userStaff.departmentId }}</div>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="6">
                <div class="info-label">账号状态：</div>
                <div>{{ userStaff.userStaffState === '1' ? '启用' : '停用' }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">附件：</div>
                <div>{{ userStaff.attachmentId || '无' }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">备注：</div>
                <div>{{ userStaff.remark || '无' }}</div>
              </el-col>
              <el-col :span="6">
                <div class="info-label">创建时间：</div>
                <div>{{ userStaff.createTime }}</div>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="6">
                <div class="info-label">更新时间：</div>
                <div>{{ userStaff.updateTime }}</div>
              </el-col>
            </el-row>
          </div>

          <div class="action-buttons">
            <el-button type="primary" @click="openEditDialog">更新信息</el-button>
            <el-button type="danger" @click="handleSignout">注销</el-button>
          </div>
        </el-card>

        <el-dialog title="更新员工信息" :visible.sync="editDialogVisible" width="50%">
          <el-form :model="editForm" label-width="120px">
            <el-form-item label="员工 ID">
              <el-input v-model="editForm.userStaffId" disabled></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
              <el-input v-model="editForm.userStaffName"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <el-input v-model="editForm.avatar" placeholder="请输入头像链接"></el-input>
              <el-upload
                action="/uploadavatar"
                list-type="picture-card"
                :on-success="handleAvatarUploadSuccess"
                :on-remove="handleAvatarRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="editForm.userStaffPhone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="editForm.userStaffIdentityCard"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="editForm.departmentId"></el-input>
            </el-form-item>
            <el-form-item label="账号状态">
              <el-select v-model="editForm.userStaffState" placeholder="请选择状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="附件">
              <el-input v-model="editForm.attachmentId"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="editForm.remark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUserStaff">确认</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getInfo, update, signout } from '@/api/user';

export default {
  name: 'UserStaff',
  data() {
    return {
      userStaff: {},
      editDialogVisible: false,
      editForm: {},
      userStaffIdentityMap: {
        1: '管理员',
        2: '部门主管',
        3: '仓库主管',
        4: '库位主管',
        5: '其他',
      },
    };
  },
  created() {
    this.fetchUserStaff();
  },
  methods: {
    fetchUserStaff() {
      getInfo().then((response) => {
        this.userStaff = response.data;
      });
    },
    openEditDialog() {
      // 将id放入表单中，方便提交
      this.editForm.userStaffId = this.userStaff.userStaffId;
      this.editForm = { ...this.userStaff };

      this.editDialogVisible = true;
    },
    updateUserStaff() {
      update(this.editForm)
        .then(() => {
          this.$message.success('信息更新成功');
          this.editDialogVisible = false;
          this.fetchUserStaff();
        })
        .catch((error) => {
          this.$message.error('更新失败: ' + error.message);
        });
    },
    async handleSignout() {
      try {
        await this.$confirm('确定要注销该员工信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        // 用户点击了确定，执行注销操作
        await signout(this.userStaff.userStaffId);
        this.$message.success('注销成功');
        this.$router.push('/login');
      } catch (error) {
        // 用户点击了取消或者注销操作失败
        if (error.name === 'Cancel') {
          // 用户点击了取消
          this.$message.info('已取消注销操作');
        } else {
          // 注销操作失败
          this.$message.error('注销失败: ' + error.message);
        }
      }
    },
    handleAvatarUploadSuccess(response, file) {
      if (response.code === 200) {
        this.editForm.avatar = response.data.url;
        this.$message.success('头像上传成功');
      } else {
        this.$message.error('头像上传失败');
      }
    },
    handleAvatarRemove() {
      this.editForm.avatar = '';
    },
  },
};
</script>

<style scoped>
.user-staff-container {
  padding: 20px;
}
.staff-info {
  margin-bottom: 20px;
}
.info-label {
  font-weight: bold;
  margin-bottom: 5px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.action-buttons {
  margin-top: 20px;
}
</style>